<template>
  <div class="onediv">
    <div class="towdiv">
      <div style="width: 45%; height: 100%;margin-left: 10%; margin-top: 5%; float: left; ">
        <div style="display: flex;">
          <h2>个人基本信息</h2>
        </div>
        <div class="img_DIV">
          <el-avatar :size="80" :src="user_info.sculpture"></el-avatar>
          <el-link type="primary" @click="pop_up=true">修改头像</el-link>
        </div>
        <span style="float: left; margin-top: 3vh;">账户余额：{{ user_info.money}}<el-link @click="Recharge()">充值</el-link></span>
        <el-form
              :model="user_info"
              :rules="user_info_yz"
              label-width="100px"
              ref="registerForm"
              style="float: left; margin-top: 8vh; margin-left: -13vw;"
            >
            <el-form-item  label="用户名" prop="username">
                <el-input
                  v-model.number="user_info.username"
                  placeholder="请输入用户名"
                ></el-input>
              </el-form-item>
              <el-form-item  label="手机号" prop="mobile">
                <el-input
                  v-model.number="user_info.phone"
                  placeholder="请输入手机号"
                ></el-input>
              </el-form-item>
              <el-form-item  label="邮箱" prop="emailbox">
                <el-input
                  v-model.number="user_info.emailbox"
                  placeholder="请输入邮箱"
                ></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password" style="margin-bottom: 35px">
                <el-input
                  type="password"
                  v-model="user_info.password"
                  placeholder="请输入密码"
                >
                </el-input>
              </el-form-item>
              <el-button type="primary" @click="Information()" >提交修改信息</el-button>
            </el-form>

      </div>
      <div v-if="user_info.member==0" style="margin: auto; ">
        <img style="width: 500px;" src="../../../../assets/img/admin/vip_fales.png" alt="">
        <el-link type="primary" @click="PurchaseMember=true">开通会员</el-link>
      </div>
      <div v-if="user_info.member==1" style="margin: auto; ">
        <img style="width: 500px;" src="../../../../assets/img/admin/vip.png" alt="">
      </div>
    </div>

    <div v-if="pop_up" class="ChangeAvatar">
      <div style="background-color: white; width: 50%; height: 60%;margin: 15vh auto; ">
        <div style="padding: 2vh ">
          <h2 style="font-size: 16px; font-weight: 800;color: rgba(0, 0, 0, 0.85);">上传头像</h2>
          <br>
          <el-upload
            class="upload-demo"
            drag
            :action="imgurl"
            :on-success="imgSunccess"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件</div>
          </el-upload>
          <el-button @click="pop_up=false">取消</el-button>
        </div>
      </div>
    </div>

    <!-- 购买会员 -->
    <div v-if="PurchaseMember" class="ChangeAvatar">
      <div style="background-color: white; width: 40%; height: 60%;margin: 15vh auto;border-radius:10px; ">
        <div>
          <div style="width: 100%;height: 10vh;padding: 2vh;border:10px ; background-color: rgb(131, 159, 167);">
            <el-avatar :size="50" style="float: left;" :src="user_info.sculpture"></el-avatar>
            <h3 style="float: left; margin-top: 1.5vh;margin-left: 1vw; color:white;">{{ user_info.username }}</h3>
          </div>
          <div style="padding: 3vh;">
           
            <div style="width: 20%; height: 15vh;padding: 1vh;border-radius: 4px;border-color:#4bb7e6 ; border-width:medium;border-style:solid;">
              <p style="font-size: 17px;">开通会员</p>
              <h1 style="margin-top: 2vh; margin-left: 1vw;">￥35</h1>    
            </div>
          </div>
          <br>          
          <el-divider></el-divider>
          <el-button @click="purchase()">购买</el-button>
          <el-button @click="PurchaseMember=false">取消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  components: {},
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    };
    var  checkusername = (rule, value ,callback)=>{
      if(!value){
        return callback(new Error("用户名不能为空"));
      }
    };
    var  checkuseremailbox = (rule, value ,callback)=>{
      const reg =/([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的邮箱账号,邮箱以字母开头"));
        }
    };
    var validatePass = (rule, value, callback) => {
      if(!value){
        return callback(new Error("密码不能为空"));
      }else {
        const reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){4,10}$/;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("只能输入4-10位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种"));
        }
      }
    };

    return {
      pop_up: false,
      PurchaseMember:false,
      user_info:{},
      user_info_yz: {
        username: [{ validator: checkusername, trigger: "blur" }],
        phone: [{ validator: checkPhone, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        emailbox:[{ validator: checkuseremailbox, trigger: "blur" }]
      },
      imageUrl:'',
      imgurl:'api/file/uploadStudentAvatar',
      file:null,
    }; 
    },
  mounted() {
    var that=this
    that.NewAxios()
    var user_info=JSON.parse(sessionStorage.getItem("user_info"))
    if(user_info!=null){
      that.user_info=user_info
    }
    this.imgurl=this.imgurl+'?username='+this.user_info.username
  },
  
  methods: {
    //头像上传成功
    imgSunccess(){
      this.NewAxios()
      setInterval(() => {
        this.pop_up=false
      }, 3000);
    },
      //账号充值
      Recharge(){
        var that=this
        var timestamp = (new Date()).valueOf()
        window.open('api/alipay?'+'orderId='+timestamp+'&'+'username'+that.user_info.username);
      },
    //购买会员
    purchase(){
      var that=this
      axios({
        method: 'get',
        url: 'api/purchase',
        params: {
          Id:that.user_info.id
        }
    }).then(function(res){
      if(res.data==1){
        that.$alert('请返回登录','购买成功', {
          confirmButtonText: '确定',
          callback: action => {
            that.$router.replace('/Login')
          }
        });
      }else{
        that.$alert('余额不足', '购买失败', {
          confirmButtonText: '确定',
          callback: action => {
            that.$message({
              type: 'info',
              message: `请重试`
            });
          }
        });
      }
    })

    },
 //请求用户信息
  NewAxios(){
   var that=this
   var user_info=JSON.parse(sessionStorage.getItem("user_info"))
    axios({
        method: 'get',
        url: 'api/GetUserInfo',
        params: {
          UserId:user_info.id
        }
    }).then(function(res){
      sessionStorage.setItem('user_info', JSON.stringify(res.data))
    })
  },
    Information(){
      var that=this
      axios({
        method: 'post',
        url: 'api/UpdataUser',
        params: {
          eMailbox:that.user_info.emailbox,
          password:that.user_info.password,
          username:that.user_info.username,
          phone:that.user_info.phone,
          id:that.user_info.id
        }
    }).then(function(res){
      if(res.data==1){
        that.$message({
              type: 'info',
              message: `修改成功,需重新登录`
            });
            // that.$router.replace('/Login')
      }else{
        that.$message({
              type: 'info',
              message: `修改失败`
            });   
      }
    })
    }
  }
}
</script>

<style>
.onediv {
  width: 100vw;
  height: 90vh;
  padding-top: 4vh;
  background-color: #F4F5F9;
  position: relative;
  text-align: center;
}

.towdiv {
  margin: auto;
  width: 80vw;
  height: 86vh;
  background-color: white;
  text-align: center;

}

.img_DIV {
  margin-top: 5vh;
  padding: 1vh 0 0 1vw;
  display: flex;

}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.ChangeAvatar{
  width: 100%; height: 100%; background-color: rgba(148, 146, 146, 0.8); top:0%; position: absolute;
}
.ChangeAvatar h1{
  width: 20%;
  font-size: 28px;
  color: #1ecdec;
}
</style>